import React from "react";
import "./index.css";
import "./AMap";
import "./addtoolbar";

import { Toast } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';

function loadingToast() {
    Toast.loading('Loading...', 3, () => {
      console.log('Load complete !!!');
    });
}


class MapGDP extends  React.Component{
    constructor(props) {
        super(props);
        this.props = props;

        this.defaultConfig = { //默认配置
            zoom: 12,              // 默认缩放级别
            touchZoomCenter: 1,    // 为1时缩放以地图中心
            resizeEnable: true,    // 监控地图容器尺寸变化
            doubleClickZoom: true, // 双击放大地图
            center: [116.397428, 39.90923] //初始化地图中心点
        }
        this.map = null   // 地图实例
        this.mapMove = false // 地图是否移动中
        this.centerPixel = { y: 'calc(50vw - 16.7px)', x: 'calc(50vw - 9px)' } // 扎点默认位置
    }

     // 创建实例
     createMap(el) {
        // 有问题
        // let count = 0;
        // while(!this.map && count < 10){
        //     ++count;
        //     console.log(count)
        //     this.map = new AMap.Map(el, this.defaultConfig)
        //     if(this.map) this.mapLister();
        //     if(count>=10) console.log("地图数据获取失败！")
        // }

        this.map = new AMap.Map(el, this.defaultConfig)
        if(this.map) this.mapLister();
    }

    // 动态中心点
    setCenterIcon() {
        let lnglat = this.map.getCenter()
        let pixel = this.map.lngLatToContainer(lnglat)
        this.centerPixel = pixel
    }

    // 开启定位
    getLocation() {
        const mapError = new Map([
            ['Get ipLocation failed.', 'IP精确定位失败'],
            ['Browser not Support html5 geolocation.', '浏览器不支持原生定位接口'],
            ['Geolocation permission denied.', '浏览器禁止了非安全域的定位请求'],
            ['Get geolocation time out.', '浏览器定位超时'],
            ['Get geolocation failed.', '定位失败']
        ])
        this.map.plugin('AMap.Geolocation', () => {
            console.log("开启定位，定位中！")
            loadingToast();
            const geolocation = new AMap.Geolocation({
                enableHighAccuracy: true, //是否使用高精度定位
                timeout: 30000,           //超过n秒后停止定位
                showButton: false,        //显示定位按钮
                showMarker: true,         //定位成功后在定位到的位置显示点标记
                showCircle: false,        //定位成功后用圆圈表示定位精度范围
                panToLocation: true,      //定位成功后将定位到的位置作为地图中心点---
                zoomToAccuracy: true,     //调整地图视野范围使定位位置及精度范围视野内可见
            })
            this.map.setZoom(15) // 缩放比例改变后重新定位时设置初始缩放比例
            this.map.addControl(geolocation)  // 添加控件
            geolocation.getCurrentPosition()  // 进入页面时自动定位
            AMap.event.addListener(geolocation, 'complete', (result) => {
                // 不在这里取数据，因为返回的经纬度、详细地址偏差比较大----下面有获取精确地址的介绍
                let {addressComponent,position:_position} = result;
                let address = [
                    addressComponent.province,
                    addressComponent.city? addressComponent.city:addressComponent.province,
                    addressComponent.district,
                    addressComponent.street+addressComponent.streetNumber].join(",");
                let position = JSON.stringify({longitude: _position.R, latitude: _position.Q});
                    
                if(this.props.fillChoseLocation){
                    // this.props.fillChoseLocation(address,position);
                }
                // else if(this.props.fillCurrentLocation){
                //     this.props.fillCurrentLocation(address,position);
                // }
                else{
                    console.log("定位当前完成",address)
                    console.log("定位当前完成",position)
                }
            })
            AMap.event.addListener(geolocation, 'error', (err) => { // 定位失败的错误提示
                let msg = mapError.get(err.message) || err.message
                console.log(msg);
            })
        })
    }

    // 监听地图变化
    mapLister() {
        this.map.on("complete", function(){
            console.log("地图加载完成！");
            AMap.service(["AMap.PlaceSearch"], function() {
                console.log("this->",this)
                //构造地点查询类
                let placeSearch;
                try{
                    placeSearch = new AMap.PlaceSearch({ 
                        pageSize: 5, // 单页显示结果条数
                        pageIndex: 1, // 页码
                        city: "010", // 兴趣点城市
                        citylimit: true,  //是否强制限制在设置的城市内搜索
                        map: this.map, // 展现结果的地图实例
                        panel: "panel", // 结果列表将在此容器中进行展示。
                        autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
                    });
                }catch(err){
                    console.log(err)
                }
            }); 
         });
        // * 地图移动中
        this.map.on('mapmove', () => {
           this.mapMove = false
        })
        // * 地图移动结束
        this.map.on('moveend', () => {
            this.mapMove = true
            this.getCenterAddress() // 获取地址----下面会做详细介绍
            // this.setCenterIcon();
        });
        this.getLocation();
    }

    // 获取详细地址
    // AMap.PlaceSearch().searchNearBy() 根据中心点经纬度、半径以及关键字进行周边查询
    // AMap.Geocoder().getAddress() 地理编码与逆地理编码服务，用于地址描述与坐标间的相互转换
    getCenterAddress() {
        let lnglat = this.map.getCenter()
        AMap.service('AMap.PlaceSearch', () => {
            let placeSearch = new AMap.PlaceSearch({
                    pageSize: 10,
                    pageIndex: 1,
                    children: 1,
                    extensions: 'all',
                    type: '通行设施|地名地址信息|政府机构及社会团体|楼宇|产业园区|风景名胜|机场出发/到达|火车站|港口码头|长途汽车站|地铁站|轻轨站|公交车站',
                })
            let center = [lnglat.lng, lnglat.lat]

            placeSearch.searchNearBy('', center, 50, (sta, result) => {
                    if (sta === 'complete' && result.info === 'OK') {
                        // result.poiList.pois // 数组第一项就是获取的精确地址
                        let targetAddress = result.poiList.pois[0];
                        let address = [targetAddress.pname,
                            targetAddress.cityname,
                            targetAddress.adname,
                            targetAddress.name].join(",");
                        let position = JSON.stringify({longitude: targetAddress.location.R, latitude: targetAddress.location.Q});
                       
                        if(this.props.fillChoseLocation){
                            this.props.fillChoseLocation(address,position)
                        }else{
                            console.log("searchNearBy--->",address);
                            console.log("searchNearBy--->",position);
                        }
                    }
                })
            })
    }

    componentDidMount(){
        setTimeout(()=>{
            this.createMap(this.map_container);
            // setTimeout(()=>{
            //     AMap.service(["AMap.PlaceSearch"], function() {
            //         //构造地点查询类
            //         var placeSearch = new AMap.PlaceSearch({ 
            //             pageSize: 5, // 单页显示结果条数
            //             pageIndex: 1, // 页码
            //             city: "010", // 兴趣点城市
            //             citylimit: true,  //是否强制限制在设置的城市内搜索
            //             map: this.map, // 展现结果的地图实例
            //             panel: "panel", // 结果列表将在此容器中进行展示。
            //             autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
            //         });
            //         //关键字查询
            //         console.log("placeSearch-->",placeSearch)
            //         placeSearch.search('大学');
            //     });
            // },100)
        },50)
    }

    render(){
        return(
            <div className='map_container' id="map_container" 
                    ref={map_container=>this.map_container = map_container}>
                <div className='center_icon'>
                    <img src={require("../../common/image/map/mark_bs.png").default} />
                </div>
            </div>
        )
    }
}

export default MapGDP;